<script setup>
import { computed, onMounted, ref } from 'vue'
import { IconSearchAlt } from '../icon/index.js'

// 组件: 可绑定属性 keyWord 用于初始化搜索框中值, 可以绑定回调事件 search, 其参数是 搜索框中值(会去除首尾空格)
// <SearchBox @search="事件" :key-word="初始值" />

const props = defineProps({
    keyWord: { // 初始值
        default: '',
    }
});
const emits = defineEmits(['search']);
const keyWord = ref('');
function goToSearch() {
    emits('search', keyWord.value);
}
onMounted(()=>{
    keyWord.value = props.keyWord;
});
</script>
<template>
    <div class="search-box-dl">
        <div class="left-dl"><input type="text" class="input-dl" v-model.trim="keyWord"><IconSearchAlt class="icon-dl" /></div>
        <div class="right-dl">
            <div class="btn-dl" @click="goToSearch">搜索</div>
        </div>
    </div>
</template>
<style scoped>
.search-box-dl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1.2em;
}
.search-box-dl .left-dl {
    position: relative;
    width: 7em;
}
.left-dl .icon-dl {
    width: 0.7em;
    height: 0.7em;
    color: #999;
    position: absolute;
    top: 50%;
    left: 0.2em;
    transform: translate(0, -50%);
}
.left-dl .input-dl {
    width: 100%;
    height: 100%;
    display: block;
    font-size: 0.66em;
    border-radius: 1em;
    box-sizing: border-box;
    padding: 0.1em 0.4em 0.1em 1.4em;
}
.search-box-dl .right-dl {
    flex-shrink: 0;
    font-size: 0.42em;
}
.right-dl .btn-dl {
    background-color: #999;
    padding: 0.4em 1.4em;
    border-radius: 5em;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}
</style>